<template>
    <TechModal class="bind-phone-modal" :title="title" v-model="showBindPhone" :isClose="false">
        <div class="bind-phone-tip" v-if="tip">{{tip}}</div>
        <Field v-model="mobile" type="number" placeholder="输入您的手机号" @blur="inputOnBlur" :autofocus="true" :maxlength="11"  :error-message="phoneError" />
        <Field v-model="code" type="number" placeholder="输入验证码" @blur="inputOnBlur" :maxlength="4" :error-message="codeError">
            <Button v-if="isWait" class="get-code" type="default" plain size="small" slot="button" :disabled="true">{{`${times}s后重发`}}</Button>
            <Button v-else class="get-code" type="danger" plain size="small" slot="button" @click="getCode" :disabled="!isPhone">获取验证码</Button>
        </Field>
        <div class="btn-list">
            <Button :disabled="isLoading" @click="close">取消</Button>
            <Button type="danger" :disabled="isDisabled" :loading="isLoading" @click="bindPhone">确定</Button>
        </div>
    </TechModal>
</template>

<script>
import { Popup, Field, Button } from 'vant';
import { TechIcon, TechModal } from '@components/base';
import { validatePhone } from '@common/reg';
import { sendBindPhoneCode } from '@common/market';
import { inputBlurAction } from '@common/utils';

import logger from '@common/logger';
import { TipError } from '@common/tip';

export default {
    name: 'BindPhone',
    components: {
        Popup,
        Field,
        Button,
        TechIcon,
        TechModal,
    },
    props: {
        title: {
            type: String,
            default: '绑定手机',
        },
        tip: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            showBindPhone: false,
            mobile: '',
            code: '',
            isWait: false,
            times: 35,
            isLoading: false,
            codeError: '',
        };
    },
    computed: {
        isPhone() {
            // 正则判断输入的phone是否是正确的phone
            const val = this.mobile.trim();
            if (val.length === 11 && validatePhone(val)) {
                return true;
            }
            return false;
        },
        phoneError() {
            const val = this.mobile.trim();
            if (val.length === 11 && !validatePhone(val)) {
                return '手机号不正确';
            }
            return '';
        },
        isDisabled() {
            return this.mobile.trim() === '' || this.code.trim() === '';
        },
    },
    methods: {
        show() {
            this.showBindPhone = true;
        },
        close() {
            this.showBindPhone = false;
            Object.assign(this.$data, this.$options.data());
            clearInterval(this.code_interval);
        },
        inputOnBlur() {
            inputBlurAction();
        },
        getCode() {
            // 获取验证码
            this.isWait = true;
            this.isLoading = false;
            sendBindPhoneCode(this.mobile);
            this.code_interval = setInterval(() => {
                if (this.times > 0) {
                    this.times--;
                } else {
                    this.isWait = false;
                    this.times = 35;
                    clearInterval(this.code_interval);
                }
            }, 1000);
        },
        checkValidity() {
            if (validatePhone(this.mobile) && this.code !== '') {
                return true;
            } else if (!validatePhone(this.mobile)) {
                TipError('手机号格式不正确');
                return false;
            } else {
                return false;
            }
        },
        async bindPhone() {
            this.isLoading = true;
            // const flag = await checkBindPhoneCode(this.mobile, this.code);
            // logger.info('验证验证码结果：', flag);
            // 执行绑定操作
            logger.info('输入的code：', this.code);
            if (this.checkValidity()) {
                this.$emit('bindPhone', {
                    mobile: this.mobile,
                    code: this.code,
                });
                this.close();
            } else {
                this.isLoading = false;
            }
        },
        error() {
            this.isLoading = false;
            this.codeError = '验证码不正确';
        },
    },
};
</script>

<style lang="less">
    .bind-phone-modal {
        .bind-phone-tip {
            .font-size();
            color: @gray-darker;
            .m-b(@gap);
        }
        .modal-content {
            .van-field {
                border: @border;
                border-radius: @border-radius / 2;
                .m-b(@gap-md);
                &::after {
                    border: none;
                }
            }
            .get-code {
                border: none;
            }
        }
        .btn-list {
            .flex-row-center();
            .van-button {
                width: 48%;
                &:last-child {
                    margin-left: 4%;
                }
            }
        }
    }
</style>

